﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>活动管理</title>
<link href="<%=path%>/favicon.ico" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link href="<%=path%>/css/marketing/s_style.css" rel="stylesheet">

</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                <div class="col-md-6">
                   <div class="x_progress s_big">
		            <div class="s_line">
		                <div class="s_progress_bar s_current" role="progressbar"
		                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
		                    <span class="sr-only_1">1</span>
		                    <p class="x_color_bz">选择模板</p >
		                </div>
		                <div class="s_progress_bar " role="progressbar"
		                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
		                    <span class="sr-only_2">2</span>
		                    <p class="x_color_bz">编辑内容</p >
		                </div>
		                <div class="s_progress_bar" role="progressbar"
		                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
		                    <span class="sr-only_3">3</span>
		                    <p class="x_color_bz">分享设置</p >
		                </div>
		                <div class="s_progress_bar" role="progressbar"
		                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
		                    <span class="sr-only_4">4</span>
		                    <p class="x_color_bz">活动预览</p >
		                </div>
		                <div class="s_progress_bar" role="progressbar"
		                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
		                    <span class="sr-only_5">5</span>
		                    <p class="x_color_bz">分享</p >
		                </div>
		            </div>
		          </div>
                </div> 
                <div class="col-md-6 text-right">
                
                    <!-- <a href="javascript:showDesignDialog();" style="margin-right:40px;color:#f8ac59">请专家设计</a> -->
					<shiro:hasPermission name="markting_activity_h5:create_template"><button type="button" class="btn  btn-primary" style="margin-right:20px" data-toggle="modal" data-target="#myModal5">新建模板</button></shiro:hasPermission>
					<button id="use_model" type="button" class="btn  btn-warning" style="margin-right:10px">使用模板</button>
					<button type="button" class="btn  btn-outline btn-primary"  onclick="window.location.href='<%=path%>/view/ui/activityTemplateList'" >模板管理</button>
				</div>
                
                </div>
                
                
                
                <div class="col-md-12" style="margin-top:20px">
                    <!--内容左侧-->
                    <div class="col-md-6  white-bg">
                        <div class="k_left_title">
                            <h5>模板预览</h5>
                            <h3 class="text-center" id="activity_model_name"></h3>
                        </div>
                        <div  id="show">
                        </div>
                    </div>
                    <!--内容左侧end-->
                    <div class="col-md-1"></div>
                    <!--内容右侧-->
                    <div id="x_basics_list" class="col-md-5  white-bg  x_basics_list x_basics x_floatr x_r x_padding10 ">
                        <div class="tabs-container">
                          <ul class="nav nav-tabs">
                            <li class="active"><a id="sys" data-toggle="tab" href="#tab-1" aria-expanded="true">创意模板</a>
	                        </li>
	                        <li class=""><a id="defined" data-toggle="tab" href="#tab-2" aria-expanded="false">自定义模板</a>
	                        </li>
                          </ul>
                          
                          <div class="tab-content">
                           
                            <div id="tab-1" class="tab-pane active">
                            <div class="tabs-container"> 
                               <ul class="nav nav-tabs">
	                               	<li class="active"><a class="select_tab1" data-toggle="tab" href="#tab-1-1" aria-expanded="true">全部</a>
			                        </li>
			                        <!-- <li class=""><a class="select_tab2" data-toggle="tab" href="#tab-1-2" aria-expanded="false">营销活动</a>
			                        </li>
			                        <li class=""><a class="select_tab3" data-toggle="tab" href="#tab-1-3" aria-expanded="false">节日庆贺</a>
			                        </li>
			                        <li class=""><a class="select_tab4" data-toggle="tab" href="#tab-1-4" aria-expanded="false">企业推广</a>
			                        </li>
			                        <li class=""><a class="select_tab5" data-toggle="tab" href="#tab-1-5" aria-expanded="false">预约邀请</a>
			                        </li> -->
                               </ul>
                               <div class="tab-content">
                                    <div id="tab-1-1" class="tab-pane active">
                                    <div class="row">
                                      <div class="col-sm-12">
                                       <div class="ibox">
	                                        <div class="ibox-content" id="li1">
	                                          
	                                        </div>
                                        </div>
                                      </div>
                                    </div>
                                       
                                    
                                    
                                       <!--  <ul class="fix" id="li1">
                                        </ul>
                                        <div class="clear-shadow"></div> -->
                                    </div>
                                    <div id="tab-1-2" class="tab-pane">
                                        <ul class="fix" id="li2">
                                        </ul>
                                        <div class="clear-shadow"></div>
                                    </div>
                                    <div id="tab-1-3" class="tab-pane">
                                        <ul class="fix" id="li3">
                                        </ul>
                                        <div class="clear-shadow"></div>
                                    </div>
                                    <div id="tab-1-4" class="tab-pane">
                                        <ul class="fix" id="li4">
                                        </ul>
                                        <div class="clear-shadow"></div>
                                    </div>
                                    <div id="tab-1-5" class="tab-pane">
                                        <ul class="fix" id="li5">
                                        </ul>
                                        <div class="clear-shadow"></div>
                                    </div>
                               
                               </div>
                               </div>
                               <div class="m_xpages sys" style="width:100%;margin:0;">
								 <div class="mian">
									    <span>共0条</span> <span>0/0页</span> <a
										href="javascript:;" class="prev sys1">上一页</a> <a href="javascript:;"
										class="next sys2">下一页</a> <span>前往</span> <input type="text" value="1"
										class="text sys3"> <span>页</span>
								  </div>
							   </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                 <ul class="fix" id="li7">
                                 </ul>
                                 <div class="clear-shadow"></div>
                                  <div class="m_xpages defined" style="width:100%;margin:0;">
								 <div class="mian">
									    <span>共0条</span> <span>0/0页</span> <a
										href="javascript:;" class="prev defined1">上一页</a> <a href="javascript:;"
										class="next defined2">下一页</a> <span>前往</span> <input type="text" value="1"
										class="text defined3"> <span>页</span>
								  </div>
							   </div>
                            </div>
                          </div>
                        </div>
                    
                    
                    
                    
                       
                    </div>
                    <!--内容右侧end-->
                </div>
            </div>
        </div>
    </div> 
    
      <form hidden="" id="desin_html" method="get" class="form-horizontal m-t">
         <div class="form-group">
             <label class="col-sm-3 control-label">姓名</label>
             <div class="col-sm-8">
                 <input id="name" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
         <div class="form-group">
             <label class="col-sm-3 control-label">电话</label>
             <div class="col-sm-8">
                 <input id="phone" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
         <div class="form-group">
             <label class="col-sm-3 control-label">页面数</label>
             <div class="col-sm-8">
                 <input id="pageNum" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
         <div class="form-group">
             <label class="col-sm-3 control-label">描述</label>
             <div class="col-sm-8">
                 <input id="desc" type="text" class="form-control"  aria-required="true">
             </div>
         </div>
     </form>

    <div hidden="" class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
	    <div class="modal-dialog modal-sm">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	                <h4 class="modal-title">选择新建模板样式</h4>
	            </div>
	            <div class="modal-body text-center">
	                <ul  class="row">
						<li class="col-md-6"><img class="choseType" id="pic_text" src="<%=path%>/images/marketing/icon_wxz.png" />图文</li>
						<li class="col-md-6"><img class="choseType" id="photo" src="<%=path%>/images/marketing/icon_xz.png" />相册</li>
				    </ul>
	            </div>
	             <div class="modal-footer">
                     <button type="button" class="btn btn-white s_cancel " data-dismiss="modal">取消</button>
                     <button type="button" class="btn btn-primary k_verify">下一步</button>
                 </div>
		     </div>
	    </div>
	</div> 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="<%=path%>/hplus/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog-plus.js"></script>  
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
    
	<script type="text/javascript">
	   var access_token=$.cookie('access_token');
	   var cid=$.cookie('cid');
	   var uid=$.cookie('uid');
	   var startIndex = 0;
	   var pageSize = 9;
	   var currentPage = 1;
	   var pageCount = 0;
       
	   var model_id;
	   var model_url;
	   var type="sys";
	   
	   var currentIndex="li1";
	   var modelType;
	   var sys_tag="";
	   var is_sys=true;
	   $('#sheji').click(function() {
			$('.s_popup,.m_consum').show();
		});
	   
	   
	   $('.s_cancel,.issue_delect span').click(function(){
	        $('.s_popup_delect,.issue_delect').hide();
	    });
	    $('.s_cancel1,.issue_delect1 span').click(function(){
	        $('.s_popup_delect1,.issue_delect1').hide();
	    });
			$('#create_model').click(function() {
				$('.s_popups,.m_xconsum').show();
			});
			$('.s_cancel,.J_sclose').click(function() {
				$('.s_popups,.m_xconsum').hide();
			});
			$('.s_role h3 span a').click(function() {
				$('.s_popup,.m_consum').show();
			});
			$('.k_cancel,.J_close').click(function() {
				$('.s_popup,.m_consum').hide();
			});
			$('.k_submit').click(function() {
				$('.s_popup,.m_consum').hide();
				$('.s_popup1,.s_consum').show();
				$('.s_popup1,.s_consum').delay(3000).fadeOut();
			});
			$('#search_button').click(function() {
				key_word=(document.getElementById('input_search')).value;
				getModelList();
			});
			$(document).on("click",".choseType",function(e){
				choseType=this.id;
				if(choseType=="photo"){
					document.getElementById('photo').src='<%=path%>/images/marketing/icon_xz.png';
					document.getElementById('pic_text').src='<%=path%>/images/marketing/icon_wxz.png';
				}else{
					document.getElementById('pic_text').src='<%=path%>/images/marketing/icon_xz.png';
					document.getElementById('photo').src='<%=path%>/images/marketing/icon_wxz.png';
				}
			});
		
	   
	   $(document).on('click', '.pic_li', function() {
			var imgSrc = $(this).children("h2").children("img").attr("alt");
			$(this).attr("src",imgSrc);
			$(".choose_pic").removeAttr("src");
			$(this).children("p").children("img").attr("src","<%=path%>/images/marketing/choose.png");
			var img = "<img style='width:100%;height:auto;' src='"+imgSrc+"' alt='' />";
			
			$("#show").html(img);
			var t = $(this).children("p").children("a").text();
			$("#activity_model_name").text(t);
		});
	   
	   $(document).on('click', '#select2 .pic_li', function() {
			var imgSrc = $(this).children("h2").children("img").attr("alt");
			$(this).attr("src",imgSrc);
			$(".choose_pic").attr("src","");
			$(this).children("p").children("img").attr("src","<%=path%>/images/marketing/choose.png");
			var img = "<img style='width:100%;height:auto;' src='"+imgSrc+"' alt='' />";
			
			$("#show").html(img);
			var t = $(this).children("p").children("a").text();
			$("#activity_model_name").text(t);
		});
	   
	   
	   
	   $(function(){
		   getSysModelList("","li1");
		   $(".select_tab1").click(function () {
	            is_sys=true;
	            sys_tag="";
	            currentIndex="li1";
	            startIndex=0;
	 		   getSysModelList("","li1");
	        });
	        $(".select_tab2").click(function () {
	           /*  $(".content-2").show();
	            $(".content-1,.content-3,.content-4,.content-5").hide(); */
	            is_sys=true;
	            sys_tag=$(".select_tab2").text();
	            currentIndex="li2";
	            startIndex=0;
	 		   getSysModelList(sys_tag,"li2");
	        });
	        $(".select_tab3").click(function () {
	            
	            is_sys=true;
	            sys_tag=$(".select_tab3").text();
	            currentIndex="li3";
	            startIndex=0;
	 		   getSysModelList(sys_tag,"li3");
	        });
	        $(".select_tab4").click(function () {
	            
	            is_sys=true;
	            sys_tag=$(".select_tab4").text();
	            currentIndex="li4";
	            startIndex=0;
	 		   getSysModelList(sys_tag,"li4");
	        });
	        $(".select_tab5").click(function () {
	            
	            is_sys=true;
	            sys_tag=$(".select_tab5").text();
	            currentIndex="li5";
	            startIndex=0;
	 		   getSysModelList(sys_tag,"li5");
	        });
	        $('#defined').click(function() {
	        	is_sys=false;
	        	startIndex=0;
				getDefinedModelList("li7");
			});
	        $('#sys').click(function() {
	        	is_sys=true;
			});
	        
		   //使用此模板
		   $('#use_model').click(function() {
			   if(StringEmpty(model_id)){
				   if(type=="sys"){
					   window.location.href = "<%=path%>/api/bm/ui/createActivity2?model_id="+model_id;
				   }else if(type=="defined_pic"){
					   window.location.href = "<%=path%>/view/ui/photoAlbum?type=activity&model_id="+model_id+"&modelType="+modelType;
				   }else if(type=="defined_text"){
					   window.location.href = "<%=path%>/view/ui/createModel?type=activity&model_id="+model_id+"&modelType="+modelType;
				   }else if(type=="sys_invitation"){
					   window.location.href = "<%=path%>/api/bm/ui/invitation01?type=activity&model_id="+model_id;
				   }else if(type=="sys_card"){
					   window.location.href = "<%=path%>/view/ui/companyCard?type=create&model_id="+model_id;
				   }
			   }else{
				   promptDialog("请选择模板","");
			   }
			  
			});
		  
		   
		   $(document).on('click', '.model', function() {
				model_id=$(this).attr("model_id");
				model_url=$(this).attr("model_url");
				type=$(this).attr("model_type");
				modelType=$(this).attr("modelType");
				var choseId="#choseId"+model_id;
				$(choseId).show();
				
				console.log("model_id----->"+model_id);
				console.log("type----->"+type);
			});
	   });
		
    
    function getSysModelList(tag,html_id) {
			var url="<%=path%>/activitySysModel/ajaxActivitySysyModelList";
			$.post(url, {
				"access_token" : access_token,
				"cid" : cid,
				"uid" : uid,
				"startIndex" : startIndex,
				"pageSize" : pageSize,
				"tag" : tag,
			}, function(data) {
				
				if (data.status == 200) {
					
					sysModelListHtml(data.data,html_id,"sys");
					page2(data.totalCount);
				} else if(data.error_code =="20028"){
					loginDialog();
				}else{
					//errorDialog(data.message,"");
				}
			});
		
	}
    function getDefinedModelList(html_id) {
    	var url="<%=path%>/activityDefinedTemplate/ajaxTemplateList";
		$.post(url, {
			"access_token" : access_token,
			"cid" : cid,
			"uid" : uid,
			"startIndex" : startIndex,
			"pageSize" : pageSize,
		}, function(data) {
			
			if (data.status == 200) {
				sysModelListHtml(data.data,html_id,"defined");
				console.log("---------->"+data.totalCount);
				page(data.totalCount);
			} else if(data.error_code =="20028"){
				loginDialog();
			}else{
				//errorDialog("无自定义模板","您还未创建过自定义模板，赶快去创建吧!");
			}
		});
	}
    
    //系统模板
    function sysModelListHtml(data,html_id,type11) {
		var html="";
		var html2='';
		var row_flag=0;
		for(var i=0;i<data.length;i++){
			    var thumbnail_pic='';
			    var model_pic='';
			    row_flag=row_flag+1;
			    if(StringEmpty(data[i].thumbnailPic)){
			    	thumbnail_pic=data[i].thumbnailPic;
			    }else{
			    	thumbnail_pic='<%=path%>/images/marketing/k_img.png';
			    }
			    if(StringEmpty(data[i].modelPic)){
			    	model_pic=data[i].modelPic;
			    }else{
			    	model_pic='<%=path%>/images/marketing/k_img.png';
			    }
			    if(row_flag==1)
			        html+='<div class="row">';
				html+='<li class="col-sm-4 pic_li"><p  id="choseId'+data[i].id+'" class="x_choose" style="position:absolute">';
				
				if(i==0){
					html+='<img class="choose_pic" src="<%=path%>/images/marketing/choose.png"></p>';
					var img = "<img style='width:100%;height:auto;' src='"+model_pic+"' alt='' />";
					model_id=data[i].id;
					type=data[i].type;
					modelType=type11;
					console.log("type------>"+model_id);
					$("#show").html(img);
				}else{
					html+='<img class="choose_pic" src=""></p>';
				}
				
				
				
				html+='<h2 style="cursor:pointer" model_id="'+data[i].id+'" model_url="'+data[i].web_url+'"  modelType='+type11+' model_type="'+data[i].type+'" class="model"><img style="width:119px;height:192px;" class="show_pic" src="'+thumbnail_pic+'"  alt="'+model_pic+'" ></h2>';
				html+= '<p class="text-center"><a title="'+data[i].name+'" style="display:inline-block;width:130px;text-decoration:none;color:#777;cursor:pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">'+data[i].name+'</a></p></li>';
				if(row_flag==3&&i+1!=data.length){
					html+='</div>';
					row_flag=0;
					html2+=html;
					html='';
				}else if(i+1==data.length){
					html+='</div>';
					html2+=html;
				}
				
				
		  }
		$('#'+html_id+'').html(html2);
		
		console.log("type------>"+data[0].type);
		  
	}
    
   
    
    
  //判断字符串是否为空
    function StringEmpty(content) {
    	if (content == undefined || content == "" || content == null) {
    		return false;
    	} else {
    		return true;
    	}
    }
  
  
    
    $(".m_xpages select").change(function(){
 		pageSize = Number($(this).val());		 		
 		activityList();
 	});
 	
 	$(".m_xpages a.prev").click(function(){	 		
 		if(currentPage > 1){
 			currentPage--;
 			startIndex -= pageSize;	 
 			if(is_sys){
				getSysModelList(sys_tag,currentIndex);
			}else{
				getDefinedModelList("li7");
			}
 			
 		}
 	});
 	
 	$(".m_xpages a.next").click(function(){
 		if(currentPage < pageCount){
 			currentPage++;
 			startIndex += pageSize;	
 			if(is_sys){
				getSysModelList(sys_tag,currentIndex);
			}else{
				getDefinedModelList("li7");
			}
 			
 		}
 	});
 	
 	$(".m_xpages :text").keyup(function(e){
		if(e.keyCode==13){
			var pageGo = $(this).val();
			if(/^[0-9]+$/.test(pageGo)){
				pageGo = Number(pageGo);
				if(pageGo<1 || pageGo>pageCount){
					promptDialog('请输入合法页数',"");
				}else if(pageGo != currentPage){
					startIndex = (pageGo -1) * pageSize ;
					if(is_sys){
						getSysModelList(sys_tag,currentIndex);
					}else{
						getDefinedModelList("li7");
					}
					
				}
			}else{
				promptDialog();
			}
		}
	});
	function page(totalCount) {
		pageCount = totalCount/pageSize;
			if (totalCount % pageSize > 0)
				pageCount++;
			pageCount = parseInt(pageCount);
			currentPage =  startIndex / pageSize + 1;
			currentPage = parseInt(currentPage);
			if(currentPage == 1){
				$(".defined1").addClass("pageDisable");
			}else{
				$(".defined1").removeClass("pageDisable");
			}
			
			if(currentPage == pageCount || pageCount == 0){
				$(".defined2").addClass("pageDisable");
			}else{
				$(".defined2").removeClass("pageDisable");
			}
			console.log("-------ssssss--->"+totalCount);
			$(".defined>.mian>span:eq(0)").text('共'+totalCount+'条');
			$(".defined>.mian>span:eq(1)").text(currentPage+'/'+pageCount+'页');
	}
	
	
	function page2(totalCount) {
		pageCount = totalCount/pageSize;
			if (totalCount % pageSize > 0)
				pageCount++;
			pageCount = parseInt(pageCount);
			currentPage =  startIndex / pageSize + 1;
			currentPage = parseInt(currentPage);
			if(currentPage == 1){
				$(".sys1").addClass("pageDisable");
			}else{
				$(".sys1").removeClass("pageDisable");
			}
			
			if(currentPage == pageCount || pageCount == 0){
				$(".sys2").addClass("pageDisable");
			}else{
				$(".sys2").removeClass("pageDisable");
			}
			console.log("-------ssssss--->"+totalCount);
			$(".sys>.mian>span:eq(0)").text('共'+totalCount+'条');
			$(".sys>.mian>span:eq(1)").text(currentPage+'/'+pageCount+'页');
	}
	
	function showDesignDialog(){
		var d = dialog({
			title: '请专家设计',
			content: $('#desin_html'),
			okValue: '确定',
			ok: function () {
				var name=$('#name').val();
				var phone=$("#phone").val();
				var pageNum=$("#pageNum").val();
				var desc=$("#desc").val();
				console.log(name+","+phone+","+pageNum+","+desc);
				if(StringEmpty(name)&&StringEmpty(phone)&&StringEmpty(pageNum)&&StringEmpty(desc)){
					this.title('提交中…');
					d.close().remove();
					successDialog("提交成功","");
				}else{
					promptDialog("请将信息填写完整","");
				}
				return false;
			},
			cancelValue: '取消',
			cancel: function () {
				d.close().remove();
			}
		}).width(450);
		d.showModal();
		
	}
	
	var choseType="photo"
	
	$(document).on("click",".choseType",function(e){
		choseType=this.id;
		if(choseType=="photo"){
			document.getElementById('photo').src='<%=path%>/images/marketing/icon_xz.png';
			document.getElementById('pic_text').src='<%=path%>/images/marketing/icon_wxz.png';
		}else{
			document.getElementById('pic_text').src='<%=path%>/images/marketing/icon_xz.png';
			document.getElementById('photo').src='<%=path%>/images/marketing/icon_wxz.png';
		}
	});
	//下一步
	$('.k_verify').click(function() {
		if(choseType=="photo"){
			window.location.href = "<%=path%>/view/ui/photoAlbum?type=model";
		}else{
			window.location.href = "<%=path%>/view/ui/createModel?type=model";
		}
	});
	
	</script>
   
</body>
</html>